<template>
  <div class="gallery-wrapper">
    <ul class="imgs-list">
      <li
        v-for="img in foldList"
        :key="img.id"
      >
        <h1>{{img.name}}</h1>
        <div class="gallery-img"
          :style="{ 'background-image': 'url('+img.url+')'}">
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "FoldGallery",
  props: {
    foldList: Array
  }
}
</script>
<style lang="scss" scoped>
.gallery-wrapper {
  margin-top: 2em;
  background-color: #ccc;
  height: 18em;
  color: #fff;
  .imgs-list {
    li:first-child {
      width: 22%;
    }
    &:hover {
      li {
        width: 13%;
      }
    }
    li {
      position: relative;
      float: left;
      width: 13%;
      height: 18em;
      overflow: hidden;
      transition: width 0.2s;
      &:hover {
        width: 22%;
      }
      h1 {
        margin: 2em auto;
        position: relative;
        z-index: 2;
        width: 1em;
        font-size: 2rem;
      }
      .gallery-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
    // .active {
    //   width: 22%;
    // }
  }
}
</style>
